<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <title>EasyCharts - Userprofile</title>
    </head>
    <body>
        <script>
            var time = null
            function move() {
                window.location = 'index.php'
            }
            function validateForm()
            {
                var cur_pass=document.forms["changepwform"]["current_password"].value
                var new_pass=document.forms["changepwform"]["new_password"].value
                var repeat_pass=document.forms["changepwform"]["repeat_password"].value
                if (cur_pass==null || cur_pass=="" || new_pass==null || new_pass=="" || repeat_pass==null || repeat_pass=="")
                {
                    alert("No empty fields is allowed");
                    return false;
                }
            }
            function validate_newpw()
            {          
                if (document.getElementById("newpwinput").value.length > 4)
                {
                    document.getElementById("newpwicon").src = "img/accept.png";
                }
                else
                {
                    document.getElementById("newpwicon").src = "img/bullet_error.png";
                }
            }
            function validate_repeatpw()
            {          
                if (document.getElementById("repeatpwinput").value == document.getElementById("newpwinput").value && document.getElementById("newpwinput").value != "")
                {
                    document.getElementById("repeatpwicon").src = "img/accept.png";
                }
                else
                {
                    document.getElementById("repeatpwicon").src = "img/bullet_error.png";
                }
            }
        </script>
        <div id="content" style="min-width: 1200px; max-width: 1200px;">
            <?php
            // Starts the session
            session_start();

            // Includes
            include 'validateuser.php';
            include 'header.php';
            include 'menu.php';
            ?>


            <div id="pagecontent" style="height: 100%; padding-bottom: 26px;">
                <div id="contentbox" style="width: 900px;">
                    <h2 style="margin-top: 0px; border-bottom: 1px solid #cccccc; width: 100%;"><img src="img/user_edit.png"/> <?php echo $_SESSION["valid_username"]; ?></h2>
                    <?php
                    // If wronglogin the show messagebox
                    if (isset($_SESSION["wrongpassword"])) {
                        if ($_SESSION["wrongpassword"] == 1) {
                            echo '<div align="center" class="errorbox" style="width: 96%">Wrong password combination</div>';
                            $_SESSION["wrongpassword"] = 0;
                        }
                    }
                    if (isset($_SESSION["pwchangesuccess"])) {
                        if ($_SESSION["pwchangesuccess"] == 1) {
                            echo '<div align="center" class="successbox" style="width: 96%">Password successfully changed. For security reasons you will have to relog in 5 seconds</div>';
                            $_SESSION["pwchangesuccess"] = 0;
                            session_unset();
                            session_destroy();
                            echo "<script language='JavaScript'>var t=setTimeout('move()',5000);</script>";
                        }
                    }
                    ?>
                    <div style="width: 48%; clear: none; float: left;">
                        <h3 style="margin-top: 15px; margin-bottom: 0px; width: 100%;">Change Password</h3>
                        <form name="changepwform" action="changepassword.php" method="post" onsubmit="return validateForm()">
                            <div style="border: 1px solid #cccccc; background-color: white; margin-top: 6px; padding: 10px; border-radius: 6px;">
                                <div style="height: 40px;">
                                    <label style="margin-right: 10px; position: relative; top: 10px;" >Current password:</label>   
                                    <input type="password" name="current_password" id="passwordinput" class="textfield" style="width: 180px; margin-top: 6px; padding-left: 24px; float: right;"/>
                                </div>
                                <div style="width: 100%; border-bottom: 1px solid #eee; margin-bottom: 8px; margin-top: 4px;"></div>
                                <div style="height: 40px;">
                                    <label style="margin-right: 10px; position: relative; top: 10px;" >New password:</label>
                                    <div style="float: right;">
                                        <img id="newpwicon" src="img/bullet_error.png" style="position: relative; top: 3px;"/>
                                        <input type="password" onkeyup="validate_newpw()" name="new_password" id="newpwinput" class="textfield" style="width: 180px; margin-top: 6px; background-image: none; padding-left: 6px;"/>
                                    </div>
                                </div>
                                <div style="height: 40px;">
                                    <label style="margin-right: 10px; position: relative; top: 10px;" >Repeat password:</label>  
                                    <div style="float: right;">
                                        <img id="repeatpwicon" src="img/bullet_error.png" style="position: relative; top: 3px;"/>
                                        <input type="password" onkeyup="validate_repeatpw()" name="repeat_password" id="repeatpwinput" class="textfield" style="width: 180px; margin-top: 6px; background-image: none; padding-left: 6px;"/>
                                    </div>
                                </div>
                                <div style="height: 40px;">  
                                    <input type="submit" name="submit" value="Change Password" id="submit" style="float: right; margin-top: 6px;"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <?php
            include 'footer.php';
            ?>
        </div>
    </body>
</html>
